import type { RootState } from '../../../../store'
import { setLanguage } from '../../../../store/modules/global'
import { Dropdown, type MenuProps } from 'antd'
import { useDispatch, useSelector } from 'react-redux'

const Language = () => {
  const { language } = useSelector((state: RootState) => state.global)
  const dispatch = useDispatch()

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: <span>简体中文</span>,
      onClick: () => dispatch(setLanguage('zh')),
      disabled: language === 'zh'
    },
    {
      key: '2',
      label: <span>English</span>,
      onClick: () => dispatch(setLanguage('en')),
      disabled: language === 'en'
    }
  ]

  return (
    <Dropdown menu={{items}} placement='bottom' trigger={['click']} arrow={true}>
      <i className='icon-style iconfont icon-zhongyingwen' />
    </Dropdown>
  )
}

export default Language